<template>
	<view>
		<page-head :title="'套餐列表'" :headtype="2"></page-head>
		<view class="meal">
			<view class="mealname marginAuto">特惠套餐</view>
			<view class="meallist">
				<view class="dritem marginAuto" v-for="(item,index) in tcdatas" :key="index" @click="apifun.navigate('/pages/accompany/mealxq','id='+item.id)">
					<view class="dritemgoods flex">
						<view class="cardeachbimg">
							<image class="goodsimg" :src="apifun.URLimg+item.image" mode=""></image>
						</view>
						<view class="cardeachbmsg">
							<view class="cardeachbmsg-name flex">
								<view class="cardeachbmsg-namen ellipsis01">{{ item.name }}</view>
							</view>
							<view class="starty">
								<view class="jlq">{{ item.min }}小时起约</view>
								<view class="jlq">{{ item.sale_num }}已售</view>
							</view>
							<view class="cardeachbmsg-jl">
								<text style="color:#FC2A2A;font-size:24rpx;">￥</text>
								<text style="color:#FC2A2A;font-size:36rpx;">{{ item.price }}</text>
								<text style="color:#666666;font-size:24rpx;margin-left: 20rpx;text-decoration: line-through;">￥{{ item.old_price }}</text>
							</view>
							<view class="cardeachbmsg-site flex">
								<view class="site flex">有效期：{{ item.day }}天</view>
								<view class="cardbtn flex">
									<view class="cardbtneach mainBg baiColor">购买</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				page:1,
				tcdatas:[],
				opensiteac:{}
			};
		},
		onLoad() {
			this.opensiteac = uni.getStorageSync('pjsiteac');
			this.initdata()
		},
		methods: {
			initdata(){
				let sendData = {
					city_id:this.opensiteac.city_id,
					page:this.page,
					limit:this.apifun.limit
				}
				this.apifun.unirequest('/api/partnerDrive/getEscortMenuList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						if(datas.data.length <= 0){
							this.page--;
							return false
						};
						this.tcdatas = [...this.tcdatas,...datas.data];
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			},
		},
		onPullDownRefresh() {
			this.page = 1;
			this.tcdatas = [];
			this.initdata();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initdata()
		},
	};
</script>

<style scoped lang="scss">
	// 商品列表
	.meal{
		position: relative;
		z-index: 10;
		.mealname{
			width: 690rpx;
			padding: 40rpx 0 30rpx;
			color: #222222;
			font-size: 34rpx;
			font-weight:500;
		}
		.meallist{
			.dritem{
				width: 690rpx;
				padding:10rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				.dritem-top{
					justify-content: space-between;
					padding: 10rpx 0;
					.dritemtl{
						.jlq{
							display: inline-block;
							padding:0 10rpx;
							background:#FFEFE4;
							color:#FF720C;
							font-size:20rpx;
							border-radius:6rpx;
							height:50rpx;
							line-height:50rpx;
							margin-right: 10rpx;
						}
						.dritemtltxt{
							font-size: 28rpx;
							color: #222222;
							line-height: 50rpx;
						}
					}
					.dritemtr{
						font-size: 26rpx;
						line-height: 50rpx;
					}
				}
				.dritemgoods{
					padding: 20rpx 0;
					.cardeachbimg{
						position: relative;
						width: 240rpx;
						height: 210rpx;
						.xxhf{
							position: absolute;
							z-index: 10;
							left: -10rpx;
							top:8rpx;
							height: 50rpx;
						}
						.goodsimg{
							width: 240rpx;
							height: 210rpx;
							border-radius:10rpx;
						}
					}
					.cardeachbmsg{
						flex: 1;
						margin-left: 20rpx;
						.cardeachbmsg-name{
							color: #333333;
							font-size:30rpx;
							line-height: 50rpx;
							justify-content: space-between;
							.cardeachbmsg-namen{
								width:60%;
								font-weight: 600;
							}
							.cardeachbmsg-namestatus{
								font-size: 26rpx;
							}
						}
						.starty{
							padding:5rpx 0;
							.jlq{
								display: inline-block;
								padding:0 10rpx;
								background:#E7F2FF;
								color:#0089FB;
								font-size:20rpx;
								border-radius:6rpx;
								height: 40rpx;
								line-height: 40rpx;
								margin-right: 10rpx;
							}
						}
						.cardeachbmsg-jl{
							padding-top: 10rpx;
							font-size: 26rpx;
							line-height:40rpx;
						}
						.cardeachbmsg-site{
							justify-content: space-between;
							line-height:50rpx;
							.site{
								font-size: 24rpx;
								color:#999999;
								line-height:50rpx;
							}
							.cardbtn{
								.cardbtneach{
									width: 120rpx;
									height: 50rpx;
									line-height: 50rpx;
									font-size:28rpx;
									text-align: center;
									border-radius: 100rpx;
									margin-left: 10rpx;
								}
							}
						}
					}
				}
				.drbtn{
					justify-content: end;
					.cardbtneach{
						width: 140rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size:28rpx;
						text-align: center;
						border-radius: 100rpx;
						margin-left: 20rpx;
						border: 1px solid #1686F8;
					}
				}
			}
		}
	}
</style>